<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <link rel="stylesheet" href="../../styles/scheme.css">
</head>


<body>
<div class="dashboard-container" id="category-app">
    <div class="container">

        <div class="zgs-header-div">
            <div class="el-card zgs-card">
                <!-- 卡片 => 日报未交人员 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{today}} 项目进度情况</span>
                    </div>
                    <div v-for="item in progressData" :key="item.id">
                        <div class="el-progress-line">
                            <span>{{item.name}}完成情况：</span>
                            <el-progress :text-inside="true" :stroke-width="26" :percentage="item.rate"></el-progress>
                        </div>
                    </div>

                </el-card>
            </div>
        </div>
        <el-button type="primary" @click="addProject()">添加项目组</el-button>
        <!-- 表 => 日报详情表格
        <div
                class="tableBar"
                style="display: inline-block"
        >
        </div>-->
        <!-- 日期选择器 => 选择日期 -->

        <div class="zgs-select-div">
            <span class="demonstration">选择查询的日期时间：</span>
            <el-date-picker
                    v-model="dateValue"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>

            <span class="demonstration zgs-name-span">输入查询的人员姓名：</span>
            <el-input v-model="searchValue" placeholder="请输入内容" class="search-input"></el-input>
            <el-button class="zgs-el-button" @click="findByCondition">查询</el-button>
        </div>

        <div class="zgs-table">
            <el-table
                    :data="tableData"
                    stripe
                    class="tableBox"
            >
                <el-table-column
                        type="index"
                        label="序号"
                        width="70"
                />
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="项目名称"
                >
                </el-table-column>
                <el-table-column
                        prop="leader"
                        label="负责人"
                >
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="项目成立时间"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="160"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                size="small"
                                class="blueBug"
                                @click="listHandle(scope.row.id)"
                        >
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="pageList"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="counts"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>


</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/food.js"></script>


<script>
    new Vue({
        el: '#category-app',
        data() {
            return {
                action: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],                  // 用来存放项目数据的数组
                leaderData: [],           // 用来存放项目领导人的数组
                type: '',
                today: '',            // 今日时间
                dateValue: '',          // 日期选择器的model
                searchValue: '',             // 搜索框内容
                schedules: [],           //
                rates: [],              //
                progressData: [],         // 项目进度模型
                info: []                   // 领导人&项目信息
            }
        },
        computed: {},


        methods: {
            async init() {
                // 获取进度条数据
                await getScheme().then(res => {
                    if (String(res.code) === '1') {
                        this.progressData = res.map.project;
                        this.info = res.map.info;
                        let data = res.data;

                        for (let i = 0; i < this.progressData.length; i++) {
                            let sum = 0;
                            let fenzi = 0;
                            for (let y = 0; y < data.length; y++) {
                                if (data[y].projectId === this.progressData[i].id) {
                                    sum++;
                                    fenzi += data[y].rate;
                                }
                            }
                            let percent = ((fenzi) / (sum * 100)) * 100;
                            this.progressData[i].rate = parseInt(percent);
                        }
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }),
                    // 以下内容为项目列表的展示页面
                    await getProjectPage({
                        'page': this.page,
                        'pageSize': this.pageSize,
                        'dateValue': this.dateValue,
                        'searchValue': this.searchValue
                    }).then(res => {
                        if (String(res.code) === '1') {
                            this.tableData = res.data.records;
                            this.leaderData = res.map.leaders;
                            let leaders = res.map.leaders;
                            // 格式化日期
                            for (var i = 0; i < this.tableData.length; i++) {
                                const date = new Date(this.tableData[i].createTime);
                                // 使用Date对象的方法获取年、月、日等信息
                                const year = date.getFullYear();
                                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
                                const day = String(date.getDate()).padStart(2, '0');
                                this.tableData[i].createTime = `${year}-${month}-${day}`;
                                this.tableData[i].name = res.data.records[i].name;
                                for (let y = 0; y < leaders.length; y++) {
                                    if (leaders[y].id === this.tableData[i].id) {
                                        this.tableData[i].leader = leaders[y].name;
                                    }
                                }
                            }
                            this.counts = Number(res.data.total)
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
            },


            findByCondition() {
                findByConditionJS({
                    'page': this.page,
                    'pageSize': this.pageSize,
                    'dateValue': this.dateValue,
                    'searchValue': this.searchValue
                })
                    .then((res) => {
                        console.log("这里是findByCondition")
                        console.log(res)
                        if (String(res.code) === '1') {
                            this.tableData = res.data.records;
                            let leaders = res.map.leaders;
                            // 格式化日期
                            for (var i = 0; i < this.tableData.length; i++) {
                                const date = new Date(this.tableData[i].createTime);
                                // 使用Date对象的方法获取年、月、日等信息
                                const year = date.getFullYear();
                                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
                                const day = String(date.getDate()).padStart(2, '0');
                                this.tableData[i].createTime = `${year}-${month}-${day}`;
                                this.tableData[i].name = res.data.records[i].name;
                                for (let y = 0; y < leaders.length; y++) {
                                    if (leaders[y].id === this.tableData[i].id) {
                                        this.tableData[i].leader = leaders[y].name;
                                    }
                                }
                            }
                            this.counts = Number(res.data.total)
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
            },


            // 关闭弹窗
            handleClose() {
                this.dialogData.dialogVisible = false
                this.dialogData4Info.dialogVisible = false
            },

            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            addProject() {
                window.parent.menuHandle({
                    url: '/paper/page/project/add.html'
                }, true)
            }
        },
        created() {
            this.init()
        },
        mounted() {
        }
    })
</script>
</body>
</html>